@font-face {
  font-family: 'YouSheBiaoTiHei';
  src: url('../allPage/font/YouSheBiaoTiHei.ttf');
}

@plugin './plugin.js';

.positioncc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

html {
  width: 100%;
  height: 100%;
}

body {
  overflow: overlay;
}

#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'PingFangSC-Regular, PingFang SC';


}

.allpageBg {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: w(48);
  position: relative;
  background: linear-gradient(90deg, #0B2C47 0%, #0B2543 100%);
  box-shadow: inset 0px 0px 55px 0px rgba(228, 245, 255, 0.5);
  // background: url(./assets/image2/bg.png) no-repeat center center / 100% 100%;

  &::before {
    content: '';
    width: 100%;
    height: 100%;
    pointer-events: none;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
    background: radial-gradient(#ffffff00 0%, #ffffff00 10%, rgba(14, 39, 68, 1) 80%);
  }

}

.allpage {
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  color: #fff;
  font-size: w(48);
  z-index: 2;

  .main-wrap {
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .cont-content {
      pointer-events: none;
      position: relative;
      width: 100%;
      height: 100%;
      color: #ffffff;
      overflow: hidden;

      // 右
      .home-right {
        width: w(3013);
        height: h(1704);
        margin: h(93) w(68);
        box-sizing: border-box;
        pointer-events: all;



        .cont-body {
          width: 100%;
        }

        .home-top {
          width: 100%;
          height: 100%;
          background: url(./assets/image2/rightOne.png) no-repeat center center / 100% 100%;
          overflow: hidden;


          .cont-body {
            width: 100%;
            height: h(1474);
            // border: 1px solid #04b0ff;
            // background: #000;


            .cont-flex {
              display: flex;
              justify-content: center;
              align-content: space-around;
              flex-wrap: wrap;
              overflow: hidden;
              color: #D4F1FF;
              margin-top: h(20);
              // border:1px solid #ff0404;
            }

            .oneItemBox {
              width: w(1206);
              height: h(376.5);
              background-color: #fff;
              display: flex;
              font-size: w(75);
              margin: h(54) w(82);
              padding-bottom: h(2);
              padding-top: h(1);
              box-sizing: border-box;
              justify-content: start;
              align-items: center;
              background: url(./assets/image2/oneItemBox.png) no-repeat center center / 100% 100%;
              

              .img {
                width: w(230);
                height: h(230);
                margin: 0px w(100) 0px w(167);
              }

              .name {
                font-size: w(75);
                height: h(105);
                line-height: h(105);
              }

              .value {
                font-size: w(120);
                font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                font-weight: 500;
                height: h(182);
                line-height: h(182);
                color: rgba(255, 242, 116, 1);
              }

              .valueUnit {
                font-size: w(60);
                font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                font-weight: 600;
                height: h(182);
                line-height: h(182);
                color: rgba(255, 242, 116, 1);
              }

              .time{
                font-size: w(10);
                font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                font-weight: 100;
                height: h(30);
                line-height: h(30);
                color: rgb(255, 255, 255);
              }


            }

            .towItemBox {
              width: w(441);
              height: h(44);
              line-height: h(44);
              margin: 0 auto h(2);
              display: flex;
              background: rgba(0, 76, 125, 0.15);

              .img {
                width: w(34);
                height: h(33);
                margin: 0px w(5);
              }

              .state {
                width: w(55);
                height: h(20);
                line-height: h(20);
                margin-top: h(11);
                background: linear-gradient(270deg, #44DA99 0%, #2BD594 100%);
                border-radius: w(1);
                border: w(1) solid #00FF55;
                text-align: center;
              }

              .state1 {
                width: w(55);
                height: h(20);
                line-height: h(20);
                margin-top: h(11);
                background: linear-gradient(180deg, #FF8080 0%, #F20A0A 100%);
                border-radius: w(1);
                border: w(1) solid #F60000;
                text-align: center;
              }
            }

            .divBox {
              height: h(1474);

              .cont-body {
                width: 100%;
                display: flex;
                justify-content: center;
                align-content: space-around;
                flex-wrap: wrap;
                height: h(1474);
                overflow: hidden;

                .cont-item {
                  width: w(877);
                  height: h(1146);
                  background: url(./assets/image2/cont-itemOnebg.png) no-repeat center center / 100% 100%;
                  align-items: center;
                  position: relative;
                  color: #fff;
                  margin: 0 w(26) 0 w(26);


                  .label {
                    width: 100%;
                    height: h(144);
                    line-height: h(144);
                    margin-top: h(109);
                    text-align: center;
                    font-size: w(75);
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                  }

                  .value {
                    font-size: w(130);
                    font-weight: bold;
                    text-align: center;
                    font-family: YouSheBiaoTiHei;
                    color: #FFF274;
                    margin-top: h(10);
                    margin-bottom: h(28);

                    span {
                      font-size: w(50);
                      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                      font-weight: 400;
                      color: #B6C1D7;
                      vertical-align: 'sub';
                      margin-left: w(5);
                    }
                  }

                 
                  .oneBox {
                    width: w(778);
                    height: h(480);
                    margin: h(55) auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;

                    div {
                      font-size: w(90);
                      font-family: PingFangSC-Semibold, PingFang SC;
                      font-weight: 500;
                      text-align: center;

                      .sapnStyle {
                        font-size: w(50);
                      }
                    }

                    .titleName {
                      font-size: w(60);
                      font-weight: 500;

                    }

                  }

                }

                .cont-itemTwo {
                  background: url(./assets/image2/cont-itemTwobg.png) no-repeat center center / 100% 100%;

                  .marginTOp50 {
                    overflow: hidden;
                  }

                  .twoBox {
                    width: w(778);
                    height: h(215);
                    line-height: h(215);
                    margin: h(55) auto h(4);
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    div {
                      height: h(126);
                      line-height: h(126);
                      font-size: w(60);
                      font-family: PingFangSC-Semibold, PingFang SC;
                      font-weight: 500;

                      .sapnStyle {
                        font-size: w(50);
                      }
                    }
                  }
                }
              }
            }

          }
        }

        .divBox2 {
          height: h(1474);

          .cont-title {
            width: w(2752);
            height: h(86);
            line-height: h(86);
            text-align: left;
            font-size: w(60);
            margin: h(35) auto;
            background: url(./assets/image2/title2.png) no-repeat center center / 100% 100%;

          }

          .contentbox {
            height: h(1183);
            width: w(2752);
            margin: 0 auto;
          }

        }



      }



      .cont-title {
        position: relative;
        margin: h(43) auto 0;
        width: w(2752);
        height: h(153);
        font-size: w(100);
        font-family: YouSheBiaoTiHei;
        letter-spacing: w(9);
        text-shadow: 0px 0px h(10) rgba(198, 236, 255, 0.54);
        padding-left: w(27);
        line-height: h(130);
        text-align: center;
        box-sizing: border-box;
        font-family: YouSheBiaoTiHei;
        color: #FFFFFF;
        background: url(./assets/image2/contTitleBg.png) no-repeat center center / 100% 100%;
      }

    }
  }


  s ::-webkit-scrollbar {
    display: none !important;
  }
}

// 下拉框开始
.selectDiv {
  position: absolute;
  top: h(10);
  right: w(10);
  width: w(173);
  height: h(55);
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}

.select-box {
  width: 100%;
  height: 100%;
  z-index: 99;
  position: relative;
  background: url(./assets/image2/SelectBg.png) no-repeat center center /100% 100%;

  .Icon {
    position: absolute;
    right: w(12);
    top: 50%;
    transform: translateY(-50%);
    width: w(22);
    height: h(11);
    background: url(./assets/image2/IconSelect.png) no-repeat center center /100% 100%;
  }
}

.select-box input {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 100%;
  text-align: left !important;
  background: transparent;
  outline: none;
  outline-style: none;
  border: 0;
  color: #fff;
  font-size: w(32);
  text-indent: w(12);
}

.terminalList {
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 100%;
  width: 100%;
  background: rgba(29, 81, 121, 0.986);
  border-radius: calc(4/19.2*1vw);
  border: 1px solid #325698;
  z-index: 888
}

.terminal-item {
  width: 100%;
  height: h(55);
  margin: h(5) auto;
  padding-left: w(12) !important;
  // background-color: #ff0000!important;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;

  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: w(32);
  font-family: SourceHanSansCN - Regular, SourceHanSansCN;
  font-weight: 400;
  color: #FFFFFF;
}

.active-class {
  background-color: rgba(9, 69, 92, 0.4);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

// 下拉框结束

.TimeDiv {
  position: absolute;
  right: w(150);
  top: h(180);
  font-size: w(60);
  font-family: YouSheBiaoTiHei;
}